<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>博客详情</title>
    <link rel="stylesheet" href="CSS/common.css">
    <link rel="stylesheet" href="CSS/blog_detail.css">

     <!-- 引入 editor.md 的依赖 -->
     <link rel="stylesheet" href="editor.md/css/editormd.min.css" />
</head>
<body>
    <!-- 导航栏 -->
    <div class="nav">
        <!-- logo -->
        <img src="image/🐋.jpg" alt="">
        <!-- 标题 -->
        <span class="title">我的博客系统</span>
        <!-- 空白的占位符 -->
        <span class="spacer"></span>
        <!-- 右侧的几个链接 -->
        <a href="blog_list.html">主页</a>
        <a href="blog_edit.html">写博客</a>
        <a href="logout">注销</a>
    </div>

    <!-- 版心 -->
    <div class="container">
            <!-- 左侧个人信息 -->
            <div class="left">
                <!-- 个人信息卡片 -->
                <div class="card">
                    <img src="image/头像.jpg" alt="">
    
                    <h3></h3>
                    <a href="">gitee 地址</a>
    
                    <div class="counter">
                        <span>文章</span>
                        <span>分类</span>
                    </div>
                    <div class="counter">
                        <span>2</span>
                        <span>1</span>
                    </div>
                </div>
            </div>

            <!-- 右侧文章内容 -->
            <div class="right">
                <!-- 这个 div 对应博客详情的整个部分 -->
                <div class="blog-content">
                    <!-- 博客标题 -->
                    <h3></h3>
        
                    <div class="date"></div>
                    <div id ="content" style="background-color: transparent;">

                    </div>
                </div>
            </div>
    </div>


    <!-- 在这个页面加载的时候, 给服务器发送 ajax 请求, 获取到博客的详细信息, 并在页面上进行显示 -->
    <script src="JS/jquery.min.js"></script>
    <script src="editor.md/lib/marked.min.js"></script>
    <script src="editor.md/lib/prettify.min.js"></script>
    <script src="editor.md/editormd.js"></script>
    <script>
        $.ajax({
            method: 'GET',
            url: 'blog' + location.search,
            success: function(data, status) {
                buildBlog(data);
            }
        });

        // 根据服务器返回的 JSON 对象, 来构造出页面的内容
        function buildBlog(blog) {
            // 1. 更新博客的标题
            let titleDiv = document.querySelector('.blog-content>h3');
            titleDiv.innerHTML = blog.title;
            // 2. 更新这里的日期
            let dateDiv = document.querySelector('.blog-content>.date');
            dateDiv.innerHTML = formatDate(blog.postTime);
            // 3. 设置博客的正文
            // let contentDiv = document.querySelector('.blog-content>.content');
            // contentDiv.innerHTML = blog.content;
            // 把得到的内容按照 markdown 的方式渲染, 放到 id 为 content 的标签中
            editormd.markdownToHTML('content',{markdown: blog.content});
        }

        function formatDate(timeStampMS) {
            var date = new Date(timeStampMS);

            var year = date.getFullYear(),
                month = date.getMonth() + 1,//月份是从0开始的
                day = date.getDate(),
                hour = date.getHours(),
                min = date.getMinutes(),
                sec = date.getSeconds();
            var newTime = year + '-' +
            (month < 10? '0' + month : month) + '-' +
            (day < 10? '0' + day : day) + ' ' +
            (hour < 10? '0' + hour : hour) + ':' +
            (min < 10? '0' + min : min) + ':' +
            (sec < 10? '0' + sec : sec);
            return newTime;
        }


        // 再加一个 ajax 来获取到本文作者的信息并显示
        $.ajax({
            url: 'user' + location.search, //这里要给请求中添上 blogId 参数
            method: "GET",
            success: function(data, status){
                changUser(data);
            }

        });

        function changUser(user){
            let h3 = document.querySelector('.card>h3');
            h3.innerHTML = user.username;

            if (user.isYourBlog) {
                // 自己的博客, 就需要显示一个删除按钮
                let navDiv = document.querySelector('.nav');
                let delButton = document.createElement('a');
                delButton.innerHTML = '删除';
                // 通过 a 标签的 href 只能触发 GET 请求
                // 此处需要的是 DELETE 请求
                // 就直接给 a标签加上个点击回调, 在这里通过 ajax 来实现 DELETE 请求
                delButton.href = '#';
                delButton.onclick = deleteBlog;
                navDiv.appendChild(delButton);
            }

            function deleteBlog() {
                // 通过 ajax 来构造 DELETE 请求,完成删除操作.
                $.ajax({
                    url: 'blog' + location.search,
                    method: 'DELETE',
                    success: function(data, status) {
                        // 如果删除成功, 就让页面重定向到 .blog_list.html 中
                        location.assign('blog_list.html');
                    }
                });
            }

        }
    </script>
</body>
</html>